import React, {Component} from 'react';
import './MusicSubMenu.css';
// import {Link} from "react-router-dom";

class MusicSubMenu extends Component {
	render() {
		// console.log(this.props);
		return (
			<div className='musicSubMenu'>
				<div className="bg" style={this.props.style}/>
				<div className="musicSubMenu-nav">
					<i className='iconfont icon-arrowleftzuojiantou' onClick={this.props.back}/><span>&nbsp;歌单</span>
				</div>
				<div className="musicSubMenu-container">
					<div className="detail">
						<div className="imgBox">
							<img src={this.props.playlist.coverImgUrl} alt=""/>
							<i
								className="count iconfont icon-18erji-1"> {Math.floor(this.props.playlist.subscribedCount / 1000)/10}万</i>
						</div>
						<div className="desc">
							<div className="title">{this.props.playlist.name}</div>
							<div className="person">
								<img src={this.props.playlist.creator ? this.props.playlist.creator.avatarUrl : ''} alt=""/>
								{this.props.playlist.creator ? <span className="name">{this.props.playlist.creator.nickname}</span> : null}
							</div>
						</div>
					</div>
					<ul className="subMenu">
						<li to='' className="subLi">
							<i className='iconfont icon-pinglun'/>
							<p>评论</p>
						</li>
						<li to='' className="subLi">
							<i className='iconfont icon-a-shoucang-weishoucang'/>
							<p>点赞</p>
						</li>
						<li to='' className="subLi">
							<i className='iconfont icon-jiahao1'/>
							<p>收藏</p>
						</li>
						<li to='' className="subLi">
							<i className='iconfont icon-gengduo'/>
							<p>更多</p>
						</li>
					</ul>
				</div>
			</div>
		);
	}
}

export default MusicSubMenu;